<template>
  <div class="broken">
    <div class="broken_view">
      <div class="switch">
        <!-- <div class="back" @click="$router.back()">上一页</div> -->
        <div class="name">切割台</div>
        <el-radio-group v-model="radio">
          <el-radio :label="0">1#</el-radio>
          <el-radio :label="1">2#</el-radio>
          <el-radio :label="2">3#</el-radio>
        </el-radio-group>
      </div>
      <div class="broken-box">
        <div class="broken-big-glass">
          <div
            class="broken-min-glass"
            v-for="item in glassList"
            :key="item.id"
            :style="{
              width: item.cutWidth * (1293 / item.originalWidth) + 'px',
              height: item.cutHeight * (877 / item.originalHeight) + 'px',
              left: (item.cutX / item.originalWidth) * 100 + '%',
              top: (item.cutY / item.originalHeight) * 100 + '%',
            }"
          >
            {{ item.cutWidth + "*" + item.cutHeight }} <br />
            {{ item.downFrameMark }}
            <div class="rule">
              {{ item.cutWidth > item.cutHeight ? "W" : "H" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="broken_content">
      <div class="broken-logo">
        <div class="company-logo">
          <img src="@/assets/images/logo.jpg" alt="" @click="$router.back()"/>
          <div class="company-name" @click="$router.back()">通用玻璃软件</div>
        </div>
        <div class="progress">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="Math.floor((versionNumber / maxVersion) * 100)"
              :width="200"
              :stroke-width="24"
              :format="(e) => e + '%'"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="broken-version">
        <div class="version-name">
          <div class="version-title">版号</div>
          <div class="version-action">
            <div class="text" @click="handlerVersion(0)">上一版</div>
            <div class="text" @click="handlerVersion(1)">下一版</div>
          </div>
        </div>
        <div class="version-view">{{ versionNumber }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listGlass, MaxVersion } from "@/api/dll/glass";
export default {
  data() {
    return {
      radio: 0,
      versionNumber: 1,
      glassList: [],
      maxVersion: 999,
    };
  },
  methods: {
    handlerVersion(e) {
      e == 1 ? (this.versionNumber += 1) : (this.versionNumber -= 1);
      this.versionNumber < 1
        ? (this.versionNumber = this.maxVersion)
        : undefined;
      this.versionNumber > this.maxVersion
        ? (this.versionNumber = 1)
        : undefined;
      this.getGlassList();
    },
    getGlassList() {
      let params = {
        orderId: 1,
        plate: this.versionNumber,
      };
      listGlass(params).then((res) => {
        this.glassList = res.rows;
      });
    },
    getMaxVersion() {
      MaxVersion(1).then((res) => {
        this.maxVersion = res.data[0]!=null ? res.data[0].plate : 1;
      });
    },
  },
  created() {
    this.getGlassList();
    this.getMaxVersion();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.broken {
  width: 100%;
  height: 100%;
  display: flex;
  .broken_view {
    height: 100%;
    width: 70%;
    border-right: 1px dashed #e6e6e6;
    display: flex;
    flex-direction: column;
    .switch {
      padding: 10px 25px;
      display: flex;
      align-items: center;
      .name {
        padding-left: 5px;
        font-weight: bold;
        font-size: 20px;
        margin-right: 20px;
        transform: translateY(-3px);
        cursor: pointer;
      }
      .back {
        border-right: 1px solid #e6e6e6;
        width: 55px;
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
      }
      .back:hover {
        text-decoration: underline;
      }
    }
    .broken-box {
      flex: 1;

      padding: 0px 25px 10px 25px;
      .broken-big-glass {
        position: relative;
        height: 100%;
        width: 100%;
        background-color: #deb888;
        .broken-min-glass {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          font-weight: bold;
          background-color: #17b9fc;
          border: 1px solid #000002;
          .rule {
            position: absolute;
            left: 5px;
            top: 0;
          }
        }
      }
    }
  }
  .broken_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .broken-logo {
      height: 40%;
      border-bottom: 1px dashed #e6e6e6;
      display: flex;
      flex-direction: column;
      .company-logo {
        width: 100%;
        height: 20%;
        padding: 5px 10px;
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        img {
          width: 50px;
          height: 50px;
          margin-right: 20px;
        }
        .company-name {
          font-size: 32px;
          font-weight: bold;
          letter-spacing: 2px;
          display: flex;
          align-items: flex-end;
        }
      }
      .progress {
        padding: 5px 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .progress-name {
          height: 40%;
          font-size: 20px;
          font-weight: bold;
          display: flex;
          justify-content: center;
          transform: translateY(20px);
        }
        .progress-circle {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .broken-version {
      flex: 1;
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      .version-view {
        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 240px;
        font-weight: bold;
        // transform: translateY(-80px);
        padding-bottom: 120px;
        color: aqua;
      }
      .version-name {
        height: 10%;
        display: flex;
        .version-title {
          font-size: 28px;
          font-weight: bold;
          letter-spacing: 2px;
        }
        .version-action {
          display: flex;
          margin-left: auto;
          align-items: center;
          .text {
            margin-right: 5px;
            cursor: pointer;
            display: flex;
            align-items: flex-end;
          }
          .text:hover {
            color: blue;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
::v-deep .el-progress__text {
  display: flex;
  flex-direction: column;
}
::v-deep .el-progress__text:after {
  content: "掰片进度";
  margin-top: 5px;
}
</style>
